<div class='container'>
  {{custom-html "top"}}
  {{global-notice}}
  {{#if model}}
    {{discourse-banner user=currentUser banner=site.banner overlay=view.hasScrolled hide=model.errorLoading}}
  {{/if}}
</div>

{{plugin-outlet "topic-above-post-stream"}}

{{#if model.postStream.loaded}}
  {{#if model.postStream.firstPostPresent}}
    <div id='topic-title'>
      <div class='container'>

        <div class="title-wrapper">
          {{#if editingTopic}}
            {{#if model.isPrivateMessage}}
              <span class="private-message-glyph">{{fa-icon "envelope"}}</span>
              {{autofocus-text-field id='edit-title' value=buffered.title maxLength=maxTitleLength}}
            {{else}}
              {{autofocus-text-field id='edit-title' value=buffered.title maxLength=maxTitleLength}}
              <br>
              {{category-chooser valueAttribute="id" value=buffered.category_id source=buffered.category_id}}
            {{/if}}

            {{plugin-outlet "edit-topic"}}

            {{d-button action="finishedEditingTopic" class="btn-primary btn-small no-text submit-edit" icon="check"}}
            {{d-button action="cancelEditingTopic" class="btn-small no-text cancel-edit" icon="times"}}
          {{else}}
            <h1>
              {{#unless model.is_warning}}
                <span class="private-message-glyph">{{fa-icon "envelope"}}</span>
              {{/unless}}

              {{#if model.details.loaded}}
                {{topic-status topic=model}}
                <a href='{{unbound model.url}}' {{action "jumpTop"}} class='fancy-title'>
                  {{{model.fancy_title}}}
                </a>
              {{/if}}

              {{#if model.details.can_edit}}
                <a href {{action "editTopic"}} class='edit-topic' title='{{i18n 'edit'}}'>{{fa-icon "pencil"}}</a>
              {{/if}}
            </h1>

            {{#unless model.isPrivateMessage}}
              {{topic-category topic=model}}
            {{/unless}}
          {{/if}}
        </div>
        {{plugin-outlet "topic-title"}}
      </div>
    </div>
  {{/if}}

  <div class="container posts">

    {{view "selected-posts"}}

    <div class="row">
      <section class="topic-area" id='topic' data-topic-id='{{unbound model.id}}'>
        <div class='posts-wrapper'>

          {{render 'topic-progress'}}

          {{conditional-loading-spinner condition=model.postStream.loadingAbove}}

          {{#unless model.postStream.loadingFilter}}
            {{cloaked-collection itemViewClass="post"
                                 idProperty="post_number"
                                 defaultHeight="200"
                                 content=model.postStream.posts
                                 slackRatio="15"
                                 loadingHTML=""
                                 preservesContext="true"
                                 uncloakDefault="true"
                                 offsetFixedTop="header"
                                 offsetFixedBottom="#reply-control"}}
          {{/unless}}

          {{conditional-loading-spinner condition=model.postStream.loadingBelow}}
        </div>
        <div id='topic-bottom'></div>

        {{#conditional-loading-spinner condition=model.postStream.loadingFilter}}
          {{#if loadedAllPosts}}

            {{view 'topic-closing' topic=model}}
            {{view 'topic-footer-buttons' topic=model}}

            {{#if model.pending_posts_count}}
              <div class='has-pending-posts'>
                {{{i18n "queue.has_pending_posts" count=model.pending_posts_count}}}

                {{#link-to 'queued-posts'}}
                  {{fa-icon 'check'}}
                  {{i18n 'queue.view_pending'}}
                {{/link-to}}
              </div>
            {{/if}}

            {{plugin-outlet "topic-above-suggested"}}

            {{#if model.details.suggested_topics.length}}
              <div id='suggested-topics'>
                <h3>{{i18n 'suggested_topics.title'}}</h3>
                <div class='topics'>
                  {{basic-topic-list topics=model.details.suggested_topics postsAction="showTopicEntrance"}}
                </div>
                <h3>{{{view.browseMoreMessage}}}</h3>
              </div>
            {{/if}}

          {{/if}}
        {{/conditional-loading-spinner}}

      </section>
    </div>

  </div>
{{else}}
  <div class='container'>
    {{#conditional-loading-spinner condition=noErrorYet}}
      {{#if model.notFoundHtml}}
        <div class='not-found'>{{{model.notFoundHtml}}}</div>
      {{else}}
        <div class="topic-error">
          <div>{{model.message}}</div>
          {{#if model.noRetry}}
            {{#unless currentUser}}
              {{d-button action="showLogin" class="btn-primary topic-retry" icon="user" label="log_in"}}
            {{/unless}}
          {{else}}
            {{d-button action="retryLoading" class="btn-primary topic-retry" icon="refresh" label="errors.buttons.again"}}
          {{/if}}
        </div>
        {{conditional-loading-spinner condition=retrying}}
      {{/if}}
    {{/conditional-loading-spinner}}
  </div>
{{/if}}

{{render "share"}}

{{#if currentUser.enable_quoting}}
  {{render "quote-button"}}
{{/if}}

{{#if currentUser.canManageTopic}}
  {{show-topic-admin show="showTopicAdminMenu"}}
  {{render "topic-admin-menu"}}
{{/if}}
